<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="key-example">
				<!-- 用 key 管理可复用的元素 Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，
				还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换： -->
				<template v-if="loginType==='username'">
					<label>userName</label>
					<input placeholder="Enter you username" />
				</template>
				<template v-else>
					<label>email</label>
					<input placeholder="Enter you email" />
				</template>
				<div>
					<button v-on:click="click1">Toggle login type</button>
				</div>
				
				
				<div>
					<!--
					 这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，
					 不要复用它们”。只需添加一个具有唯一值的 key attribute 即可：
					 -->
					<template v-if="loginType2==='username'">
						<label>userName</label>
						<input placeholder="Enter you username" key="username-input" />
					</template>
					<template v-else>
						<label>email</label>
						<input placeholder="Enter you email" key="email-input" />
					</template>
					<div>
						<button v-on:click="click2">Toggle login type</button>
					</div>
					
				</div>
				
				<!-- v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 -->
				<div>
					<h1 v-show="ok">hello</h1>
				</div>
		</div>	
		<script type="text/javascript">
			let app=new Vue({
				el:'#key-example',
				data:{
					loginType:'username',
					loginType2:'username',
					ok:false
				},
				methods:{
					click1:function(){
						this.loginType=this.loginType==='username'?'email':'username';
					},
					click2:function(){
						this.loginType2=this.loginType2==='username'?'email':'username';
					}
				}
			})
		</script>	
		<style type="text/css">
			
		</style>
	</body>
</html>
